<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<link rel="stylesheet" href="/assets/style.css" type="text/css" media="screen" />
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load('visualization', '1', {packages: ['annotatedtimeline'], 'language' : 'zh_CN'});
			var annotatedtimeline = null;
			var chartReady = false;

			function drawVisualization(city) {
				annotatedtimeline = null;
				chartReady = false;
				/*
				$('#wdbox').checked = 'checked';
				$('#wdbox').checked = null;
				$('#wdbox').checked = null;
				$('#wdbox').checked = null;
				*/
				
				$.post("/weather/history/" + city, {}, function(resp){
					var data = new google.visualization.DataTable();
					data.addColumn('datetime', '时间');
					data.addColumn('number', '温度');
					data.addColumn('number', '风力');
					data.addColumn('number', '降水');
					data.addColumn('number', '湿度');
					
					var count = 1000;
					data.addRows(resp.count * 24);
					var i = 0;
					var v, dp;
					for(var d in resp.data){
						v = resp.data[d];
						for (var j = 0; j < 24; j++) {
							dp = new Date(Date.parse(d.replace(/\d+:\d+:\d+/, (j < 10 ? '0' + j : j) + ':00:00')));
							data.setValue(i, 0, dp);
							data.setValue(i, 1, v[j][0]);
							data.setValue(i, 2, v[j][1]);
							data.setValue(i, 3, v[j][2]);
							data.setValue(i, 4, v[j][3]);
							//console.log(dp, v[j]);
							i++;
						}
					}
					
					annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization'));
					annotatedtimeline.draw(data, {'displayAnnotations': true});
					google.visualization.events.addListener(annotatedtimeline, 'ready', function() {
						chartReady = true;
						$(':checkbox').each(function(i){
							if(!this.checked){
								annotatedtimeline.hideDataColumns(i);
							}
						});
					});

				}, "json");
			}
			
			//google.setOnLoadCallback(drawVisualization);
		</script>
  		<script type="text/javascript" src="/assets/jquery-1.3.2.min.js "></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#place').keydown(function(e){
					if(e.which == 13){
						var self = this;
						$.get("/weather/forecast/" + this.value, function(data){
							if (data) {
								$('#tq').html(data);
							}else{
								$('#tq').html(self.value + '是哪里');
							}
						});
					}
				});
				$(':checkbox').each(function(i){
					$(this).click(function(){
						if (chartReady) {
							if (this.checked) {
								annotatedtimeline.showDataColumns(i);
							}else{
								annotatedtimeline.hideDataColumns(i);
							}
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<h1>天气预报</h1>
		<input type="text" id="place" /> 
		<div id="tq"></div>
		<h1 style="clear: both;">天气历史数据</h1>
		<div><button onclick="drawVisualization('');" >北京</button><button onclick="drawVisualization('福州');" >福州</button></button></div>
		<div>
			<input type="checkbox" id="wdbox" checked="checked"/><label for="wdbox">温度</label>
			<input type="checkbox" id="flbox"/><label for="flbox">风力</label>
			<input type="checkbox" id="jsbox"/><label for="jsbox">降水</label>
			<input type="checkbox" id="sdbox"/><label for="sdbox">湿度</label>
		</div>
		<div id="visualization" style="width: 800px; height: 400px;"></div>
	</body>
</html>